@use 'src/components/style/foundation/colors' as colors;

:global {
  .react-datepicker {
    font-size: 0.9rem;
    font-family: inherit;
  }

  .react-datepicker__current-month {
    font-size: 1.1em;
    padding: 0.3em 0;
  }

  .react-datepicker__day {
    margin: 0;
    padding: 0.166rem;
    width: 2rem;
    line-height: 2rem;
  }

  .react-datepicker__day--outside-month {
    color: #AAA;
  }

  .react-datepicker__day-name {
    width: 2rem;
  }

  .react-datepicker__day--selected,
  .react-datepicker__day--keyboard-selected {
    background-color: colors.color(accent);
  }

  .theme--dark {
    .react-datepicker,
    .react-datepicker__header {
      background-color: colors.color(grey, darker);
      border-color: colors.color(grey, dark);
    }

    .react-datepicker,
    .react-datepicker__current-month,
    .react-datepicker__day-name,
    .react-datepicker__day {
      color: white;
    }

    .react-datepicker__day:hover {
      background-color: colors.color(grey);
    }

    .react-datepicker__day--outside-month {
      color: colors.color(grey);
    }

    .react-datepicker__triangle {
      border-top-color: colors.color(grey, darker) !important;
      border-bottom-color: colors.color(grey, darker) !important;
    }

    .react-datepicker__triangle::before {
      border-top-color: colors.color(grey, dark) !important;
      border-bottom-color: colors.color(grey, dark) !important;
    }
  }
}
